<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>08.canvas面向对象</title>
</head>
<body>
<canvas id="canvas">

</canvas>

<script>
    window.onload = function () {
        //对需要绘画的canvas绘制对象
        //1
        // function Cat(age,x){
        //   this.age = age;
        //   this.x = x;
        //   //性能提升优化范畴
        //   //如果创建1000可子类,则1000个子类中都包含了eat对象;
        //   //有一些子类 (猫)不需要此方法(play) 则该方法会占用内存空间;
        //   //解决:将方法放在Cat对象的原型中
        //   //因为所有Cat的子类都会指向Cat的原型对象
        //   //这样 既节省了空间,还解决了耦合的问题
        //
        //   // function eat(){
        //   //   console.log('eat')
        //   // }
        //   // function play(){
        //   //   console.log('play')
        //   // }
        // }
        // Cat.prototype.eat = function (){
        //   console.log('eat');
        // }
        //
        // Cat.prototype.play  = function (){
        //   console.log('play')
        // };
        //
        // var originCat = new Cat(18,10);
        // console.log(originCat)
        // console.log(originCat.age)
        // originCat.eat();
        // originCat.play();

        //--------------------------------------------------
        //2
        //此时参数内容与位置固定写死
        //优化
        //形参改为对象,动态配置
        // function Cat(options) {
        //     this.age = options.age;
        //     this.x = options.x;
        // }
        //
        // Cat.prototype.play = function () {
        //     console.log('play')
        // };
        //
        // var originCat = new Cat({
        //     age:10,
        //     x:20,
        //     name:'橘猫'
        // })
        //
        // originCat.play();
        // console.log(originCat);
        // console.log(originCat.age);


        //----------------------------------------------------
        //3
        //动态初始化对象
        //将初始化方法放在其的原型上;
        function Cat(options){
            //调用原型对象初始化方法
            this._init_(options)
        }

        console.log(Cat.prototype)

        //保存原型对象上的指向原型链上一节点(父类)的原型
        // var proto =  Cat.prototype.__proto__;

        //重写prototype
        Cat.prototype  = {
            //问题 :
            //重新赋予新对象 那么原prototype对象被覆盖 ,其中的 __proto__ 属性消失?
            //添加_proto_重新指回
            // __proto__:proto,

            //然而在复制对象后proto属性依然存在,并没有消失

            //初始化方法
            _init_ : function ( options )  {
                this.age  = options.age;
                this.x  = options.x;
            },

            eat:function (){
                console.log(this.x)
            },
        }

        var originCat =  new Cat({
            age:'23',
            x:'300'
        });
        console.log(Cat.prototype)
        //扩展
        // 如果你确实要通过一个对象访问其原型，ES5 提供了一个新方法：
        var protoObj = Object.getPrototypeOf(originCat);
        console.log(protoObj)
        console.log(originCat.__proto__);
        console.log(originCat.__proto__ ===  protoObj)//true


    }
</script>
</body>
</html>
